<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
	<head th:replace="dashboard/header :: header"></head>
<body>
	<div th:replace="dashboard/script:: style"></div>
	<style>
		  .CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
		  article {
		     max-width: 100%;
		 	 padding:10px;
		 	 margin: 0px; 
		  }
		  .nav-third-level li a {
			 padding-left: 12px;
			 color: #696c6e;
		  }
	</style>

<article >
<h2 id="jobName" th:text="${ bean.taskName}">压测脚本(Scala)</h2>

<form id="modifyForm">

<input type="hidden" name="id" th:value="${bean.id}" />
<input type="hidden" name="scriptType" th:value="${bean.scriptType}" />
<input type="hidden" name="taskName" th:value="${bean.taskName}" />

<textarea th:text="${bean.scriptContent}" id="code" name="code" wrap="hard" style="height:700px;white-space: pre-wrap;word-wrap:break-word"></textarea>
<textarea th:text="${bean.scriptContent}" id="scriptContent" name="scriptContent" wrap="hard" style="display:none;height:700px;white-space: pre-wrap;word-wrap:break-word"></textarea>

</form>
<div style="font-size: 13px; width: 300px; height: 30px;margin-top:10px;">Key buffer: <span id="command-display"></span></div>

<script> 

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    keyMap: "vim",
    matchBrackets: true,
    showCursorWhenSelecting: true,
    theme: "ambiance",
    mode: "text/x-scala" , 
    inputStyle: "contenteditable"
});
editor.setSize('auto','500px');

// function saveBtn(){
function submitHandler() {
   
   /*
   var scriptDesc = editor.getValue(); 
   scriptDesc = scriptDesc.replace(/[\r\n]/g, '|');
   
   var id = $("#id").val() ;  
   var script = {
		taskName: $("#jobName"),
		scriptType: "scala",
		scriptContent: scriptDesc,
		id: id
	};
   */
   
	var code = editor.getValue() ; 
	console.log(editor.getValue()) 
	code = code.replace(/[\r\n]/g, '|');

	$("#scriptContent").val(code) ; 
	
   var modifyUrl = ctx+"portal/auto/autoTask/update" ;
   $.operate.save(modifyUrl, $('#modifyForm').serialize());
}

CodeMirror.commands.save = function() {
	
	var totalLines = editor.lineCount();
    editor.autoFormatRange({line:0, ch:0}, {line:totalLines});
	
	var code = editor.getValue() ; 
	console.log(editor.getValue()) 
	
	code = code.replace(/[\r\n]/g, '|');
	
	$.post(ctx+'portal/auto/autoTask/code' , {code:code} , function(response){
		console.log("response = " + response) ;
	}) ; 
	
};

var commandDisplay = document.getElementById('command-display');
var keys = '';
CodeMirror.on(editor, 'vim-keypress',
function(key) {
    keys = keys + key;
    commandDisplay.innerHTML = keys;
});
CodeMirror.on(editor, 'vim-command-done',
function(e) {
    keys = '';
    commandDisplay.innerHTML = keys;
}); 
</script>

</article>

<footer th:replace="dashboard/footer :: footer"></footer>

</body>
</html>
